<template>
  <div class="search-box">
    <div class="search-nav"><my-top-nav :leftText="'返回'" :title="'搜索'" @clickBack="clickBack"></my-top-nav></div>
    <div class="search-plate-one-box">
      <van-search v-model="searchTitle" @input="searchInput" @clear="clear" placeholder="请输入正确的名称(包括材质)" show-action
        @search="onSearch">
        <div slot="action" style="color:#1989fa;" @click="onSearch('')">搜索</div>
      </van-search>
      <!-- 搜索建议 -->
      <div class="more-search-box search-plate-hot" v-show="suggestList&&suggestList.length>0">
        <div class="search-plate-two-item">
          <van-grid clickable :gutter="5">
            <van-grid-item @click="searchItem(item)" v-for="(item,index) in suggestList" :key="index" :text="item" />
          </van-grid>
        </div>
      </div>
      <!-- <van-grid clickable :border="false" :column-num="1">
        <van-grid-item>
          <van-icon @click.native="goQuerstion" name="star" color="#F0E68C" size="30" />
          <p class="search-plate-one-name">挑战答题</p>
        </van-grid-item>
      </van-grid> -->
    </div>
    <div class="search-plate-two-box">
      <div class="search-result-box" v-if="isShowResult">
        <div class="search-result-title">{{rubbishTitle}}</div>
        <div class="search-result-type">{{rubishType}}</div>
        <div class="search-result-icon" v-if="rubishType !== '未搜索到分类'">
          <img src="../../assets/img/reback.png" alt="" v-if="rubishType === '属于可回收垃圾'">
          <img src="../../assets/img/danger.png" alt="" v-if="rubishType === '属于有害垃圾'">
          <img src="../../assets/img/3.png" alt="" v-if="rubishType === '属于易腐垃圾'">
          <img src="../../assets/img/4.png" alt="" v-if="rubishType === '属于其他垃圾'">
        </div>
        <div class="search-result-desc">
          <p v-if="rubishType === '属于可回收垃圾'">可回收物就是再生资源，指生活垃圾中未经污染、适宜回收循环利用的废物，是现阶段生活垃圾分类的主要工作和影响垃圾减量的重要因素。
          </p>
          <p v-else-if="rubishType === '属于有害垃圾'">对于一些有害垃圾，可以采取填埋的方法进行处置。</p>
          <p v-else-if="rubishType === '属于易腐垃圾'">在易腐垃圾处理的时候，采用机器成肥设备，经破碎预处理、好氧堆肥发酵和除杂，处理易腐垃圾。</p>
          <p v-else-if="rubishType === '属于其他垃圾'">
            其他垃圾危害较小，但无再次利用价值，难以回收的废弃物，采取卫生填埋可有效减少对地下水、地表水、土壤及空气的污染,需尽量少产生。</p>
          <p v-else>物品太过独特，词库正在补充。</p>
        </div>
      </div>
      <div class="search-plate-hot" v-else>
        <h3 class="search-left-title">热门搜索</h3>
        <div class="search-plate-two-item">
          <van-grid clickable :gutter="5">
            <van-grid-item @click="searchItem(item)" v-for="(item,index) in searchList" :key="index" :text="item" />
          </van-grid>
        </div>
      </div>
    </div>
    <div class="search-plate-three-box" v-if="!isShowResult">
      <h3 class="search-left-title">环保标语</h3>
      <div class="search-plate-three-content">
        <van-swipe style="height: 50px;" :touchable="false" :autoplay="3000" :show-indicators="false" loop vertical>
          <van-swipe-item style="text-align:center;line-height:50px;">垃圾被捡起的时候便有价值。</van-swipe-item>
          <van-swipe-item style="text-align:center;line-height:50px;">今天分一分，明天美十分。</van-swipe-item>
          <van-swipe-item style="text-align:center;line-height:50px;">随手一分，受益一生。</van-swipe-item>
          <van-swipe-item style="text-align:center;line-height:50px;">适量点菜，餐后打包，倡导绿色消费。</van-swipe-item>
          <van-swipe-item style="text-align:center;line-height:50px;">垃圾分类人人做，做好分类为人人。</van-swipe-item>
          <van-swipe-item style="text-align:center;line-height:50px;">积极参与垃圾分类，创优美社区环境。</van-swipe-item>
          <van-swipe-item style="text-align:center;line-height:50px;">垃圾扔前分一分，绿色生活一百分。</van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="search-plate-four-box" v-if="isShowResult">
      <img v-if="rubishType === '属于可回收垃圾'" src="../../assets/search/可回收.png" alt="">
      <img v-if="rubishType === '属于其他垃圾'" src="../../assets/search/其他垃圾.png" alt="">
      <img v-if="rubishType === '属于有害垃圾'" src="../../assets/search/有害垃圾.png" alt="">
      <img v-if="rubishType === '属于易腐垃圾'" src="../../assets/search/易腐垃圾.png" alt="">
    </div>
    <div class="search-question" @click="goQuerstion">挑战答题</div>
  </div>
</template>

<script>
import myTopNav from "../../components/myTopNav";

export default {
  data() {
    return {
      // 可回收垃圾
      reback:
        "键盘、塑料杯子、毯子、旧毯子、电脑键盘、机械键盘、坏键盘、鼠标、显示器、显示屏、投影仪、电脑机箱、废机箱、坏掉的电脑机箱、鼠标垫、玩具枪、废纸、塑料、玻璃、金属、报纸、期刊、图书、包装纸、塑料袋、塑料泡沫、塑料包装、玻璃瓶、碎玻璃片、暖瓶、易拉罐、罐头盒、废弃衣服、桌布、洗脸巾、书包、鞋、餐具、牙刷、玻璃杯子、矿泉水瓶、塑料玩具、塑料文具、塑料生活用品、洗发液瓶、洗手液瓶、洗衣液瓶、洗洁精瓶、玻璃饮料瓶、玻璃酒瓶、坏玻璃杯、碎玻璃窗、废玻璃板、镜片、镜子、无色玻璃，绿色玻璃，棕色玻璃、易拉罐、金属罐头盒、装饰物、铝箔、铁片、铁钉、铁管、废铁丝、旧钢丝球、铜导线、废弃衣服、裤子、袜子、毛巾、书包、布鞋、床单、被褥、毛绒玩具",
      // 有害垃圾
      danger:
        "荧光灯管、灯泡、水银温度计、油漆桶、过期药品、过期化妆品、充电电池、镉镍电池、铅酸电池、蓄电池、纽扣电池、卤素灯、药物胶囊、药片、药品内包装、使用过的医用纱布、废油漆桶、染发剂壳、过期的指甲油、洗甲水、水银血压计、水银体温计、水银温度计、老鼠药（毒鼠强）、杀虫喷雾罐、感光胶片、相片底片",
      // 易腐垃圾
      Perishable:
        "食物残渣、菜根、菜叶，动物蹄、角、瓜皮、果屑、蛋壳、鱼鳞、蛋壳、毛发、植物枝干、树叶、杂草、动物尸体、牲畜粪便、中药药渣、家养绿植、花卉、花瓣、枝叶、水果果肉、椰子肉、水果果皮、西瓜皮、桔子皮、苹果皮、水果茎枝、葡萄枝、果实、西瓜籽、过期食品、糕饼、糖果、风干食品（肉干、红枣、中药材）、粉末类食品（冲泡饮料、面粉）、宠物饲料、食材废料、火锅汤底（沥干后的固体废弃物）、鱼骨、碎骨、茶叶渣、咖啡渣、玉米核、坚果壳、果核、鸡骨、剩菜剩饭、骨头、菜根菜叶、果皮、厨余垃圾、废弃食材、废弃食物、废弃食用油脂、家庭产生的木竹、家庭产生的树枝、家庭产生的花草、家庭产生的落叶、剩菜、剩饭、菜叶、果皮、蛋壳、茶渣、汤渣、骨头、废弃食物、厨房下角料",
      // 可回收垃圾
      other:
        "快递包装袋、脏毯子、喝完的奶茶杯子、一次性杯子、砖、瓦片、瓦、砖块、陶瓷、渣土、卫生间废纸、卫生纸、纸巾、尘土、食品袋、食品盒、大棒骨、厕纸、烟盒、餐厨垃圾装袋",
      suggestList: [],
      searchTitle: "", // 搜索标题
      rubbishTitle: "", // 搜索出来的垃圾名称
      rubishType: "", // 搜索出来的垃圾分类
      isShowResult: false, // 是否显示搜索结果
      searchList: [
        "塑料袋",
        "报纸",
        "节能灯",
        "面包",
        "化妆品瓶",
        "5号电池",
        "碘酒"
      ], // 热门搜索列表
      rubbishList: [
        {
          classification: "可回收垃圾",
          child: [
            "纸张",
            "手机",
            "报纸",
            "木棒",
            "集成电路",
            "锅盖",
            "球鞋",
            "行李箱",
            "铝盒",
            "锤子",
            "连衣裙",
            "泡沫网",
            "香皂盒",
            "笔杆",
            "插板",
            "化妆品瓶",
            "闪存卡",
            "硬纸盒",
            "锅炉",
            "铁块",
            "纤维袋",
            "纸",
            "包装箱",
            "吸尘器",
            "广告纸",
            "木柜",
            "鼓",
            "刮胡刀",
            "地垫",
            "期刊",
            "电视机",
            "旧电视机",
            "旧衣服",
            "衣服",
            "旧鞋子",
            "书",
            "书籍",
            "电脑包",
            "电脑",
            "笔记本",
            "笔记本电脑",
            "玩具",
            "塑料玩具",
            "橡胶玩具",
            "电动玩具",
            "手表"
          ]
        },
        {
          classification: "有害垃圾",
          child: [
            "充电电池",
            "手机电池",
            "节能灯",
            "水银温度计",
            "艾灸针",
            "钙片",
            "水性漆",
            "输液袋",
            "药罐",
            "5号电池",
            "指甲油瓶",
            "煤气",
            "西林瓶",
            "过氧乙酸",
            "滴眼液",
            "煤油",
            "环氧漆",
            "紫外线灯",
            "放射性垃圾",
            "采血针",
            "碘酒",
            "血糖仪",
            "钴酸电池",
            "荧光管",
            "易爆品",
            "染发剂盒",
            "酒精瓶",
            "载玻片",
            "感冒药",
            "指示灯"
          ]
        },
        {
          classification: "易腐垃圾",
          child: [
            "蔬菜瓜果垃圾",
            "腐肉",
            "肉碎骨",
            "蛋壳",
            "畜禽内脏",
            "面包",
            "过期食品",
            "瓜皮果核",
            "中药药渣",
            "糟渣"
          ]
        },
        {
          classification: "其他垃圾",
          child: [
            "砖",
            "瓦",
            "陶瓷",
            "渣土",
            "卫生间废纸",
            "瓷器碎片",
            "塑料袋",
            "避孕套"
          ]
        }
      ]
    };
  },
  components: {
    myTopNav
  },
  computed: {
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description: 获取屏幕高度
     * @return: {String} 屏幕高度值
     * @Date: 2019-12-14 14:42:21
     */
    getHeight() {
      return (
        document.documentElement.scrollHeight || document.body.scrollHeight
      );
    }
  },
  created() {
    this.getRubbishList();
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
    if (this.$route.query.type) {
      this.searchTitle = this.$route.query.type;
      this.onSearch();
    }
  },
  methods: {
    /**
     * @author: 罗安兵（605762797@qq.com）
     * @description: 垃圾分类字符串转数组处理
     * @param {type}
     * @return:
     * @Date: 2019-12-19 08:48:50
     */
    getRubbishList() {
      for (let i in this.rubbishList) {
        let item = this.rubbishList[i];
        switch (item.classification) {
          case "可回收垃圾":
            item.child = item.child.concat(this.reback.split("、"));
            break;
          case "有害垃圾":
            item.child = item.child.concat(this.danger.split("、"));
            break;
          case "易腐垃圾":
            item.child = item.child.concat(this.Perishable.split("、"));
            break;
          case "其他垃圾":
            item.child = item.child.concat(this.other.split("、"));
            break;

          default:
            break;
        }
      }
    },
    /**
     * @author: 罗安兵（605762797@qq.com）
     * @description: 数组去重
     * @param {Array} arr 去重数组
     * @return:
     * @Date: 2019-12-18 20:37:21
     */
    unique(arr) {
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i] == arr[j]) {
            //第一个等同于第二个，splice方法删除第二个
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    /**
     * 使用indexof方法实现模糊查询
     * @author: 罗安兵（605762797@qq.com）
     * @param  {Array}  list     进行查询的数组
     * @param  {String} keyWord  查询的关键词
     * @return {Array}           查询的结果
     */
    fuzzyQuery(list, keyWord) {
      var arr = [];
      for (var i = 0; i < list.length; i++) {
        if (list[i].indexOf(keyWord) >= 0) {
          arr.push(list[i]);
        }
      }
      return arr;
    },
    /**
     * @author: 罗安兵（605762797@qq.com）
     * @description: 搜索建议查找
     * @param {String} value 键入值
     * @return:
     * @Date: 2019-12-18 19:50:33
     */
    searchInput(value) {
      if (!value || value == "") {
        this.suggestList.length = 0;
        return false;
      }
      let swap = [];
      for (let i in this.rubbishList) {
        swap = swap.concat(this.rubbishList[i].child);
      }
      swap = this.unique(swap);
      this.suggestList = this.fuzzyQuery(swap, value);
    },
    /**
     * @author: 罗安兵（605762797@qq.com）
     * @description: 跳转答题
     * @param {type}
     * @return:
     * @Date: 2019-12-18 19:50:48
     */
    goQuerstion() {
      this.$router.push({
        path: "/querstion"
      });
    },
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description: 热门搜索点击查询
     * @param {String} data 点击时传入的值
     * @return: {void}
     * @Date: 2019-12-15 13:37:36
     */
    searchItem(data) {
      this.suggestList.length = 0;
      this.onSearch(data);
    },
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description: 返回
     * @return: {void}
     * @Date: 2019-12-15 13:42:00
     */
    clickBack() {
      this.$router.back();
    },
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description: 搜索内容清空时触发
     * @param {type} {Object}
     * @return: {void}
     * @Date: 2019-12-15 13:22:07
     */
    clear() {
      this.isShowResult = false;
    },
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description: 搜索事件触发
     * @param: {String} data 需要搜索的标题
     * @return: {void}
     * @Date: 2019-12-14 14:42:03
     */
    onSearch(data) {
      if (data) {
        this.searchTitle = data;
      }
      if (this.searchTitle === "") {
        return false;
      }
      let classification = "";
      let strType = "";
      let isShow = false;
      for (var i = 0, j = this.rubbishList.length; i < j; i++) {
        for (var x = 0, y = this.rubbishList[i].child.length; x < y; x++) {
          if (this.rubbishList[i].child[x] === this.searchTitle) {
            isShow = true;
            classification = `属于${this.rubbishList[i].classification}`;
            break;
          }
          if (isShow) {
            break;
          }
        }
      }
      if (isShow) {
        this.rubbishTitle = this.searchTitle;
        this.isShowResult = true;
        this.rubishType = classification;
      } else {
        this.rubbishTitle = this.searchTitle;
        this.isShowResult = true;
        this.rubishType = "未搜索到分类";
      }
      // 历史记录
      switch (this.rubishType) {
        case "属于可回收垃圾":
          this.$store.commit("addSearchHistory", {
            name: this.searchTitle,
            type: 1
          });
          break;
        case "属于有害垃圾":
          this.$store.commit("addSearchHistory", {
            name: this.searchTitle,
            type: 2
          });
          break;
        case "属于易腐垃圾":
          this.$store.commit("addSearchHistory", {
            name: this.searchTitle,
            type: 3
          });
          break;
        case "属于其他垃圾":
          this.$store.commit("addSearchHistory", {
            name: this.searchTitle,
            type: 4
          });
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.search-left-title {
  font-size: 16px;
  font-weight: 700;
  font-family: "微软雅黑";
}
.search-box {
  background-color: rgb(250, 250, 250);
  padding-top: 60px;
  .search-nav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 5;
  }
  .search-question {
    color: #fff;
    font-size: 16px;
    line-height: 16px;
    padding: 8px 0 8px 16px;
    height: 14px;
    border-radius: 15px 0 0 15px;
    background-color: #426bba;
    width: 80px;
    position: fixed;
    bottom: 100px;
    right: 0;
  }
  .search-plate-one-box {
    margin: 10px 15px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 10px 15px;
    box-shadow: 0px 10px 10px 0px rgba(148, 174, 191, 0.3);
    .search-plate-one-name {
      color: #333;
      font-weight: 400;
      font-size: 12px;
    }
  }
  .search-plate-two-box {
    margin: 20px 15px;
    color: #333;
    border-radius: 4px;
    .search-plate-two-item {
      margin-top: 10px;
    }
    .search-result-box {
      background-color: #ffffff;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: center;
      font-weight: 700;
      font-size: 18px;
      padding-top: 10px;
      border-radius: 4px;
      box-shadow: 0px 10px 10px 0px rgba(148, 174, 191, 0.3);
      .search-result-icon {
        width: 50px;
        height: 50px;
        border-radius: 4px;
        img {
          width: 49px;
          height: 49px;
          border-radius: 4px;
        }
      }
      .search-result-desc {
        font-size: 15px;
        color: #333;
        font-weight: 200;
        padding: 5px;
        margin: 10px 15px;
      }
    }
  }
  .search-plate-three-box {
    margin: 20px 15px;
    border-radius: 4px;
    .search-plate-three-title {
      color: #333;
      font-size: 16px;
      font-weight: 700;
    }
    .search-plate-three-content {
      color: #333;
      border-radius: 4px;
      background-color: #ffffff;
      box-shadow: 0px 10px 10px 0px rgba(148, 174, 191, 0.3);
      width: 100%;
      margin-top: 10px;
      height: 50px;
    }
  }
  .search-plate-four-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 15px;
    border-radius: 4px;
    background-color: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0px 10px 10px 0px rgba(148, 174, 191, 0.3);
    img {
      width: 95%;
    }
  }
  .more-search-box {
    margin: 10px 0;
  }
  .more-search {
    margin: 10px 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    .more-search-item {
      width: 60px;
      margin-right: 10px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2px 0px;
      border-radius: 3px;
      .garbage-item {
        width: 63px;
      }
    }
  }
}
</style>
<style lang="scss">
.search-box {
  .search-plate-hot {
    .van-grid-item {
      border-radius: 4px;
    }
    .van-grid-item__content {
      padding: 8px 4px;
    }
  }
}
</style>
